<template>
    <div>
        <header class="header-content">
            <div class="header-icon-back" @click="to('user')"><span></span></div>
            <div class="header-title">我的收藏</div>
        </header>
        <div class="view-content">
            <div class="favorites-cell" >
                <div class="goods-img" @click="to('goodsThis')"><img src="../assets/car/pro3.jpg"></div>
                <div class="goods-details">
                    <div class="goods-name">蓝之蓝蓝色瓶装经典Q7浓香型白酒500ml52度高端纯粮食酒2瓶装包邮</div>
                    <div class="price-volume">
                        <span class="unit-price">¥296</span>
                        <img src="../assets/icon/icon-dele.png" @click="setShow">
                    </div>
                </div>
            </div>
            <div class="child" v-show="show">
                <div class="del">删除</div>
                <div class="quit" @click="setShow">取消</div>
            </div>
        </div>
    </div>
</template>
<style scoped>
    @import "../css/style.css";
    .view-content {
        bottom: 0;
    }
    .favorites-cell {
        display: flex;
        padding: 0.625rem 0.9375rem;
        background-color: #fff;
        border-bottom: 0.0625rem solid #f5f5f5;
    }
    .favorites-cell img {
        width: 5rem;
        height: 5rem;
        margin-right: 0.625rem;
    }
    .goods-name {
        text-align: left;
        font-size: 0.875rem;
        font-weight: normal;
        color: #232323;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
    .spec {
        font-size: 0.812rem;
        color: #454545;
        width: 100%;
    }
    .price-volume {
        display: flex;
        justify-content: space-between;
        margin-top: 1.56rem;
    }
    .unit-price {
        color: #e21323;
    }
    .price-volume img {
        width: 1.25rem;
        height: 1.25rem;
    }
    .child{
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
    }
    .quit {
        font-size: 1.125rem;
        line-height: 2.56rem;
        border-radius: 0.3125rem;
        border: 0.0625rem solid #353535;
    }
    .del {
        font-size: 1.125rem;
        background-color: #e64340;
        margin-top: 0.9375rem;
        color: #fff;
        line-height: 2.56rem;
        border-radius: 0.3125rem;
    }
</style>
<script>
    export default {
        data() {
            return {
                show: false
            }
        },
        methods: {
            to(page) {
                this.$router.push({
                    name: page
                })
            },
            setShow() {
                this.show = !this.show
            }
        },
    }
</script>

